import React, { useState, useTransition } from "react";

export const UseTransiton1 = () => {
    const [,startTransition]=useTransition()
    const[activeTab,setActiveTab]=useState('home')
    const onBtnClick=(name)=>{
        // 把某次更新标记为低优先级，使得组件渲染为低优先级，使得用户的操作更为优先
        startTransition(()=>{
            setActiveTab(name)
        })
        
    }
    return <div style={{height:'100vh'}}>
        <TabButton isActive={activeTab==='home'} onClick={()=>onBtnClick('home')}>Home</TabButton>
        <TabButton isActive={activeTab==='movie'} onClick={()=>onBtnClick('movie')}>Movie</TabButton>
        <TabButton isActive={activeTab==='about'} onClick={()=>onBtnClick('about')}>About</TabButton>
        <hr />
        {/* 显示区域 */}
        {activeTab==='home'&&<HomeTab />}
        {activeTab==='movie'&&<MovieTab />}
        {activeTab==='about'&&<AboutTab />}
    </div>
}
const TabButton = (props) => {
    const classes=['btn',props.isActive?'active':'']
    return <button  className={classes.join(' ')} onClick={props.onClick}>{props.children}</button>
}


const HomeTab = () => {
    return <>homeTab</>
}
const MovieTab = () => {
    const ff=new Array(100000).fill(0).map((_,i)=><p key={i}>MovieTab</p>)
    return <>{ff}</>
}
const AboutTab = () => {
    return <>AboutTab</>
}